<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户信息</title>
    <script language="javascript" type="text/javascript" src="../vue/vue2.x.js"></script>
    <script language="javascript" type="text/javascript" src="../elementUI/elementUI2.x.js"></script>
    <!--        <link rel="stylesheet" href="elementUI/elementUI2.x.css" type="text/css">-->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style type="text/css">
        /*卡片效果*/
        .text {
            font-size: 14px;
        }

        .item {
            margin-bottom: 18px;
        }

        .clearfix:before,
        .clearfix:after {
            display: table;
            content: "";
        }
        .clearfix:after {
            clear: both
        }

        .box-card {
            width: 480px;
        }


        #userInfo{
            position: relative;
            margin:0 auto;
            padding: 20px 0;
        }
        #user_name{
            position: absolute;
            top: 45px;
            left: 150px;
            font-size: 24px;
            font-weight: 700;
        }
        #user_age{
            position: absolute;
            top: 100px;
            left: 240px;
        }
        #user_sex{
            position: absolute;
            top: 100px;
            left: 150px;
        }
        .item>div{
            margin-bottom: 20px;
        }
        b{
            display: inline-block;
            width: 80px;
            margin-right: 10px;
            text-align: right;
        }
        .el-rate{
            display: inline-block;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container>
            <el-card class="box-card" id="userInfo">
                <div slot="header" class="clearfix">
                    <img id="user_img" th:src="${#request.getContextPath()+'../'+user.getUser_img()}" style="border-radius: 50%" width="100px" height="100px">
                    <span id="user_name" th:text="${user.getUser_name()}">用户名</span>
                    <div id="user_sex">性别:<span th:text="${user.getUser_sex()}"></span></div>
                    <div id="user_age">年龄:<span id="age"></span>岁</div>
                </div>
                <div class="text item">
                    <div id="user_mail"><b><i>用户账号:</i></b> <span th:text="${user.getUser_mail()}"></span></div>
                    <div id="user_birthday"><b><i>生日:</i></b> <span id="birthday" th:text="${user.getUser_birthday()}"></span></div>

                    <div id="user_reputation"><b><i>办事效率:</i></b>
                        <el-rate
                            disabled
                            v-model="value"
                            :colors="colors">
                        </el-rate><span id="reputation" v-show="false" th:text="${user.getUser_reputation()}"></span></div>
                </div>
            </el-card>
    </el-container>
</div>

<script>
    var reputation = document.getElementById("reputation");
    var vm = new Vue({
        el:'#app',
        data:{
            value: Number(reputation.innerText),
            colors: ['#99A9BF', '#F7BA2A', '#FF9900']
        },
        methods:{

        }
    });
    window.onload = function(){
        //求年龄
        var uage = document.getElementById("age");
        var birthday = document.getElementById("birthday");
        uage.innerHTML = (new Date().getFullYear() - new Date(birthday.innerText).getFullYear());

    }
</script>
</body>
</html>
